<template>
  <div class="slope-aspect-control" :class="{ expanded: isPanelExpanded }">
    <!-- 控制图标（改为放大镜 + 地形/坡度符号，体现分析含义） -->
    <div class="control-icon" @click="togglePanel" v-if="!isPanelExpanded" title="坡度坡向分析">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- 放大镜镜片 -->
        <circle cx="10" cy="10" r="5"></circle>
        <!-- 放大镜手柄 -->
        <line x1="14.5" y1="14.5" x2="20" y2="20"></line>
        <!-- 镜片内的小地形轮廓（凸起线表示坡度） -->
        <path d="M6 13c1-2 2.5-3 4-3s3 1 4 3" />
        <!-- 镜片内坡向箭头（指示坡向） -->
        <path d="M8.5 13.5l2-2" />
        <path d="M10.5 11.5l1 1" />
      </svg>
    </div>

    <!-- 控制面板 -->
    <div class="slope-aspect-panel" v-if="isPanelExpanded">
      <div class="panel-header">
        <h3>坡度坡向分析</h3>
        <div class="close-btn" @click="isPanelExpanded = false">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18M6 6l12 12"/>
          </svg>
        </div>
      </div>

      <!-- 分析类型选择 -->
      <div class="panel-section">
        <h4>分析类型</h4>
        <div class="radio-group">
          <el-radio v-model="analysisType" label="slope" size="small">坡度分析</el-radio>
          <el-radio v-model="analysisType" label="aspect" size="small">坡向分析</el-radio>
          <el-radio v-model="analysisType" label="both" size="small">两者同时分析</el-radio>
        </div>
      </div>

      <!-- 坡向表示方式 -->
      <div class="panel-section" v-show="analysisType === 'aspect' || analysisType === 'both'">
        <h4>坡向表示方式</h4>
        <el-select v-model="aspectRepresentation" @change="updateAspectRepresentation" size="small" style="width: 150px;">
          <el-option label="颜色" value="color" />
          <el-option label="箭头" value="arrow" />
        </el-select>
      </div>

      <!-- 分析设置 -->
      <div class="panel-section">
        <h4>分析设置</h4>
        <div class="setting-item">
          <label>显示分析结果</label>
          <el-switch v-model="showAnalysis" @change="toggleAnalysis" size="small"/>
        </div>
        <div class="setting-item">
          <label>透明度</label>
          <el-slider v-model="opacity" @change="updateOpacity" :min="0" :max="1" :step="0.1" size="small" style="width: 120px;"/>
          <span class="opacity-value">{{ Math.round(opacity * 100) }}%</span>
        </div>
        <div class="setting-item">
          <label>分析范围</label>
          <el-select v-model="analysisExtent" @change="updateExtent" size="small"  style="width: 150px;">
            <el-option label="当前视图范围" value="view"/>
            <el-option label="全球范围" value="global"/>
            <el-option label="自定义范围" value="custom"/>
          </el-select>
        </div>
      </div>

      <!-- 图例 -->
      <div class="panel-section" v-show="showAnalysis">
        <h4>{{ analysisType === 'slope' ? '坡度图例' : analysisType === 'aspect' ? '坡向图例' : '分析图例' }}</h4>
        <div class="legend" ref="legendContainer"></div>
      </div>

      <!-- 测试箭头按钮 -->
      <div class="panel-section" v-show="(analysisType === 'aspect' || analysisType === 'both') && aspectRepresentation.value === 'arrow'">
        <h4>测试功能</h4>
        <el-button type="primary" @click="createTestArrow" size="small" class="full-width-btn">
          创建测试箭头
        </el-button>
        <div class="test-info">在视图中心创建一个明显的测试箭头，用于验证显示功能</div>
      </div>

      <!-- 操作按钮 -->
      <div class="panel-section">
        <div class="button-container">
          <el-button 
            type="primary" 
            @click="applyAnalysis" 
            size="small" 
            class="full-width-btn"
            :loading="isLoading"
            :disabled="isLoading"
          >
            {{ isLoading ? '分析中...' : '应用分析' }}
          </el-button>
          <el-button 
            @click="clearAnalysis" 
            size="small" 
            class="full-width-btn" 
            v-if="showAnalysis"
            :disabled="isLoading"
          >
            清除分析
          </el-button>
        </div>
        
        <!-- 加载提示 -->
        <div v-if="isLoading" class="loading-indicator">
          <div class="loading-spinner"></div>
          <span>正在分析地形数据，请稍候...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as Cesium from 'cesium'
import SlopeAspectUtils from '../utils/slopeAspectUtils.js'

// Props
const props = defineProps({
  viewer: {
    type: Object,
    required: true
  }
})

// 内部状态
const isPanelExpanded = ref(false)
const analysisType = ref('slope') // slope, aspect, both
const showAnalysis = ref(false)
const opacity = ref(0.7)
const analysisExtent = ref('view')
const legendContainer = ref(null)
const aspectRepresentation = ref('color') // color, arrow 坡向表示方式
const isLoading = ref(false) // 分析加载状态

// 箭头相关引用
const aspectArrows = ref([])
const arrowGridSize = ref(30) // 箭头网格大小，减小以增加箭头密度
const arrowScale = ref(0.5) // 箭头大小缩放因子
const arrowHeightOffset = ref(3) // 箭头距离地面的高度偏移

// 分析相关引用
const customRectangle = ref(null)
const drawingMode = ref(false)
const drawRectangleHandler = ref(null)
const customExtent = ref(null)

// 工具类实例
let slopeAspectUtils = null

// 切换面板显示
const togglePanel = () => {
  isPanelExpanded.value = !isPanelExpanded.value
}

// 切换分析显示
const toggleAnalysis = () => {
  if (showAnalysis.value) {
    clearAnalysis()
  } else {
    applyAnalysis()
  }
}

// 更新透明度
const updateOpacity = () => {
  if (slopeAspectUtils) {
    slopeAspectUtils.updateOpacity(opacity.value)
  }
  // 触发重新渲染
  if (props.viewer) {
    props.viewer.scene.requestRender()
  }
}

// 更新坡向表示方式
const updateAspectRepresentation = () => {
  if (showAnalysis.value && (analysisType.value === 'aspect' || analysisType.value === 'both')) {
    clearAspectArrows()
    applyAnalysis()
  }
  
  // 更新图例
  updateLegend()
}

// 初始化绘制处理器
const initDrawHandler = () => {
  if (!props.viewer) return
  
  // 移除已有的绘制处理器
  if (drawRectangleHandler.value) {
    drawRectangleHandler.value.destroy()
  }
  
  // 创建绘制矩形的处理器
  const handler = new Cesium.ScreenSpaceEventHandler(props.viewer.scene.canvas)
  let startPosition = null
  let tempRectangle = null
  
  // 鼠标左键按下开始绘制
  handler.setInputAction((movement) => {
    if (!drawingMode.value) return
    // 保存起始点
    startPosition = movement.position
    // 优先用pickPosition获取地表点
    let startCartesian = props.viewer.scene.pickPosition(startPosition)
    if (!startCartesian) {
      startCartesian = props.viewer.scene.camera.pickEllipsoid(startPosition)
    }
    if (!startCartesian) return
    const startCartographic = Cesium.Cartographic.fromCartesian(startCartesian)
    const startLon = Cesium.Math.toDegrees(startCartographic.longitude)
    const startLat = Cesium.Math.toDegrees(startCartographic.latitude)
    const initialRect = Cesium.Rectangle.fromDegrees(startLon, startLat, startLon, startLat)
    tempRectangle = props.viewer.entities.add({
      name: '自定义分析范围',
      rectangle: {
        coordinates: initialRect,
        material: new Cesium.ColorMaterialProperty(Cesium.Color.CYAN.withAlpha(0.3)),
        outlineColor: Cesium.Color.CYAN
      }
    })
  }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
  
  // 优化：节流与移动阈值，提升流畅度
  let lastMove = null;
  let rafId = null;
  const MOVE_THRESHOLD = 3; // px
  function handleMoveThrottled() {
    if (!lastMove) return;
    if (!drawingMode.value || !startPosition) return;
    const endPosition = lastMove.endPosition;
    // 只在移动距离大于阈值时才更新
    const dx = Math.abs(endPosition.x - startPosition.x);
    const dy = Math.abs(endPosition.y - startPosition.y);
    if (dx < MOVE_THRESHOLD && dy < MOVE_THRESHOLD) return;
    let startCartesian = props.viewer.scene.pickPosition(startPosition);
    if (!startCartesian) {
      startCartesian = props.viewer.scene.camera.pickEllipsoid(startPosition);
    }
    let endCartesian = props.viewer.scene.pickPosition(endPosition);
    if (!endCartesian) {
      endCartesian = props.viewer.scene.camera.pickEllipsoid(endPosition);
    }
    if (!startCartesian || !endCartesian) return;
    const startCartographic = Cesium.Cartographic.fromCartesian(startCartesian);
    const endCartographic = Cesium.Cartographic.fromCartesian(endCartesian);
    const west = Math.min(startCartographic.longitude, endCartographic.longitude);
    const south = Math.min(startCartographic.latitude, endCartographic.latitude);
    const east = Math.max(startCartographic.longitude, endCartographic.longitude);
    const north = Math.max(startCartographic.latitude, endCartographic.latitude);
    const rectangle = new Cesium.Rectangle(west, south, east, north);
    if (!tempRectangle) {
      tempRectangle = props.viewer.entities.add({
        name: '自定义分析范围',
        rectangle: {
          coordinates: rectangle,
          material: new Cesium.ColorMaterialProperty(Cesium.Color.CYAN.withAlpha(0.3)),
          outlineColor: Cesium.Color.CYAN
        }
      });
    } else {
      tempRectangle.rectangle.coordinates = rectangle;
    }
    customExtent.value = rectangle;
  }
  handler.setInputAction((movement) => {
    lastMove = movement;
    if (rafId) return;
    rafId = requestAnimationFrame(() => {
      handleMoveThrottled();
      rafId = null;
    });
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  
  // 鼠标左键释放完成绘制
  handler.setInputAction((movement) => {
    if (!drawingMode.value || !startPosition || !tempRectangle || !customExtent.value) return
    
    // 移除临时矩形
    props.viewer.entities.remove(tempRectangle)
    
    // 创建最终矩形实体
    if (customRectangle.value) {
      props.viewer.entities.remove(customRectangle.value)
    }
    
    // customExtent.value 已经是 Cesium.Rectangle（弧度）
    console.log('最终 customExtent（弧度）:', customExtent.value)
    console.log('最终 customExtent（度）:', {
      west: Cesium.Math.toDegrees(customExtent.value.west),
      south: Cesium.Math.toDegrees(customExtent.value.south),
      east: Cesium.Math.toDegrees(customExtent.value.east),
      north: Cesium.Math.toDegrees(customExtent.value.north)
    })

    customRectangle.value = props.viewer.entities.add({
      name: '自定义分析范围',
      rectangle: {
        coordinates: customExtent.value,
        material: new Cesium.ColorMaterialProperty(Cesium.Color.CYAN.withAlpha(0.3))
      }
    })
    
    // 重置状态
    startPosition = null
    tempRectangle = null
    drawingMode.value = false
    
    // 如果分析结果已显示，重新应用分析
    if (showAnalysis.value) {
      console.log('绘制完成，customExtent（弧度）:', customExtent.value)
      if (customExtent.value) {
        console.log('绘制完成，customExtent（度）:', {
          west: Cesium.Math.toDegrees(customExtent.value.west),
          south: Cesium.Math.toDegrees(customExtent.value.south),
          east: Cesium.Math.toDegrees(customExtent.value.east),
          north: Cesium.Math.toDegrees(customExtent.value.north)
        })
      }
      applyAnalysis()
    }
    
    // 提示用户绘制完成
    alert('自定义范围已绘制完成，可以应用分析了')
  }, Cesium.ScreenSpaceEventType.LEFT_UP)
  
  drawRectangleHandler.value = handler
}

// 开始绘制自定义范围
const startDrawCustomExtent = () => {
  if (!props.viewer) {
    alert('地图尚未初始化')
    return
  }
  
  // 清除已有的自定义范围
  clearCustomExtent()
  
  // 初始化绘制处理器
  initDrawHandler()
  
  // 进入绘制模式
  drawingMode.value = true
  
  // 提示用户绘制
  alert('请在地图上按住鼠标左键并拖动来绘制分析范围')
}

// 清除自定义范围
const clearCustomExtent = () => {
  if (props.viewer && customRectangle.value) {
    props.viewer.entities.remove(customRectangle.value)
    customRectangle.value = null
  }
  customExtent.value = null
  drawingMode.value = false
}

// 清除坡向箭头
const clearAspectArrows = () => {
  if (slopeAspectUtils) {
    slopeAspectUtils.clearAspectArrows()
  }
  if (props.viewer && aspectArrows.value.length > 0) {
    aspectArrows.value.forEach(arrow => {
      props.viewer.entities.remove(arrow)
    })
    aspectArrows.value = []
  }
}


// 更新分析范围
const updateExtent = () => {
  if (showAnalysis.value) {
    // 如果已经显示分析结果，重新应用分析以更新范围
    applyAnalysis()
  }
  
  // 如果选择了自定义范围，开始绘制
  if (analysisExtent.value === 'custom') {
    startDrawCustomExtent()
  } else {
    // 如果切换到其他范围，清除自定义范围
    clearCustomExtent()
  }
}

// 更新图例 - 使用工具类的方法
const updateLegend = () => {
  if (!legendContainer.value || !slopeAspectUtils) return
  
  // 正确传递参数给createLegend方法
  slopeAspectUtils.createLegend(
    legendContainer.value, 
    analysisType.value, 
    aspectRepresentation.value
  )
}

// 测试函数：在视图中心创建一个可见的测试箭头 - 使用工具类的方法
const createTestArrow = async () => {
  if (!slopeAspectUtils) {
    console.error('工具类未初始化，无法创建测试箭头')
    return
  }
  
  try {
    console.log('开始创建测试箭头...')
    
    // 使用工具类创建测试箭头
    const testArrow = await slopeAspectUtils.createTestArrow({
      aspect: 45, 
      slope: 45,
      scale: 1.5,
      opacity: opacity.value
    })
    
    if (testArrow) {
      aspectArrows.value.push(testArrow)
      console.log('已创建测试箭头')
    }
  } catch (error) {
    console.error('创建测试箭头失败:', error)
  }
}

// 应用分析 - 使用工具类的方法
const applyAnalysis = async () => {
  if (!slopeAspectUtils) {
    console.error('工具类未初始化，无法应用分析')
    return
  }
  
  // 防止重复点击
  if (isLoading.value) return
  
  try {
    // 设置加载状态
    isLoading.value = true
    
    // 准备分析参数
    const options = {
      analysisType: analysisType.value,
      aspectRepresentation: aspectRepresentation.value,
      extentType: analysisExtent.value,
      customExtent: customExtent.value,
      opacity: opacity.value
    }
    
    // 使用工具类应用分析
    await slopeAspectUtils.applyAnalysis(options)
    
    // 先设置showAnalysis为true，确保图例容器可见
    showAnalysis.value = true
    
    // 然后更新图例
    updateLegend()
    
    console.log('坡度坡向分析已应用')
  } catch (error) {
    console.error('应用坡度坡向分析失败:', error)
    // 使用更友好的提示方式
    alert('分析应用失败，请检查地形是否已启用并稍后重试')
    clearAnalysis()
    showAnalysis.value = false
  } finally {
    // 无论成功或失败，都要清除加载状态
    isLoading.value = false
  }
}

// 清除分析 - 使用工具类的方法
const clearAnalysis = () => {
  if (isLoading.value) return

  if (slopeAspectUtils) {
    slopeAspectUtils.clearAnalysis()
  }

  // 清除本地引用的坡向箭头
  if (props.viewer && aspectArrows.value.length > 0) {
    aspectArrows.value.forEach(arrow => {
      props.viewer.entities.remove(arrow)
    })
    aspectArrows.value = []
  }


  // 强力清除所有自定义分析范围的 entity
  if (props.viewer) {
    // 1. 通过 customRectangle.value
    if (customRectangle.value) {
      props.viewer.entities.remove(customRectangle.value)
      customRectangle.value = null
    }
    // 2. 兜底：遍历所有 entity，移除 name 为“自定义分析范围”的
    const allEntities = props.viewer.entities.values || [];
    for (const ent of allEntities) {
      if (ent && ent.name === '自定义分析范围') {
        props.viewer.entities.remove(ent)
      }
    }
  }

  // 清理自定义范围引用
  customExtent.value = null

  if (legendContainer.value) {
    legendContainer.value.innerHTML = ''
  }

  showAnalysis.value = false
}

// 监听分析类型变化，更新图例和分析
watch(analysisType, () => {
  if (showAnalysis.value) {
    applyAnalysis()
  }
})

// 监听透明度变化
watch(opacity, () => {
  updateOpacity()
})

// 组件挂载时初始化
onMounted(() => {
  console.log('坡度坡向分析组件已挂载')
  slopeAspectUtils = new SlopeAspectUtils(props.viewer)
})

// 组件卸载时清理
onBeforeUnmount(() => {
  clearAnalysis()
  clearCustomExtent()
  if (drawRectangleHandler.value) {
    drawRectangleHandler.value.destroy()
    drawRectangleHandler.value = null
  }
  
  // 销毁工具类实例
  if (slopeAspectUtils) {
    slopeAspectUtils.destroy()
    slopeAspectUtils = null
  }
})

// 监听地形启用状态变化
watch(() => props.viewer?.terrainProvider?.constructor?.name, (newTerrainType) => {
  if (showAnalysis.value && newTerrainType === 'EllipsoidTerrainProvider') {
    // 如果地形被禁用，自动清除分析
    clearAnalysis()
    alert('地形已禁用，分析已清除')
  }
})
</script>

<style scoped>
/* 控制面板容器 */
.slope-aspect-control {
  position: absolute;
  bottom: 60px;
  left: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: all 0.3s ease;
}

/* 控制图标 */
.control-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 
    0 8px 32px rgba(76, 175, 80, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.control-icon:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(76, 175, 80, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* 控制面板 */
.slope-aspect-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.15) 0%, rgba(30, 41, 59, 0.15) 100%);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px 18px;
  width: 260px;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s ease;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.slope-aspect-control.expanded .slope-aspect-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* 面板头部 */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.panel-header h3 {
  margin: 0;
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  flex: 1;
}

.close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* 操作按钮 */
.panel-section {
  margin-bottom: 8px;
}

/* 加载指示器 */
.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

/* 加载动画 */
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #4CAF50;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.panel-section:last-child {
  margin-bottom: 0;
}

.panel-section h4 {
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}

/* 设置项 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 6px 0;
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-item label {
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
  white-space: nowrap;
  font-weight: 400;
}

/* 透明度值显示 */
.opacity-value {
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
  margin-left: 8px;
  min-width: 35px;
  text-align: right;
  font-weight: 500;
}

/* 按钮容器 */
.button-container {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* 按钮样式 */
.full-width-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  border-radius: 6px;
}

.full-width-btn:first-child {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.full-width-btn:first-child:hover {
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
  transform: translateY(-1px);
}

/* 图例容器 */
.legend {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
}

/* 滚动条样式 */
.legend::-webkit-scrollbar {
  width: 6px;
}

.legend::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.legend::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.legend::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 图例样式 */
:global(.legend-section) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.01);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

:global(.legend-section:last-child) {
  margin-bottom: 0;
}

:global(.legend-section h5) {
  grid-column: 1 / -1;
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 箭头图例标题 */
:global(.arrow-legend h5) {
  grid-column: 1 / -1;
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:global(.legend-item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  min-width: 0;
}

:global(.legend-item:last-child) {
  margin-bottom: 0;
}

:global(.legend-color) {
  width: 22px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  margin-right: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

:global(.legend-label) {
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
  flex: 1;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* 箭头图例样式 */
:global(.arrow-legend) {
  gap: 8px 12px;
}

:global(.arrow-legend-item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  color: aliceblue;
}

:global(.arrow-legend-icon) {
  width: 16px;
  height: 16px;
  position: relative;
}

:global(.arrow-legend-icon::after) {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 8px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
}

/* 自定义Element Plus样式 */
:deep(.el-radio__label) {
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
}

:deep(.el-select .el-input__inner) {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
}

:deep(.el-slider__bar) {
  background-color: #4CAF50;
}

:deep(.el-slider__button) {
  border-color: #4CAF50;
}

:deep(.el-switch__core .el-switch__button) {
  background-color: white;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #4CAF50;
}
</style>